<style>
        body{
                background: #f3f3f3;
        }
        .BannerImg{
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 0;
        }
        /* 顶部user */
        .index .userimg{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: rgba(0,0,0,.2);
                position: relative;
                z-index: 1;
                margin-left: 85%;
                margin-top: 1rem;
      
        }
        .userimg img{
                width: 50%;
        }
        /* 定位与搜索 */
        .indexNav{
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 0 12px;
                margin-top: 20%;
        }
        .index .local{
                position: relative;
                padding:.3rem .7rem;
                background: white;
                border-radius: 1rem;
        }

        .search img{
                width: 50%;
        }


        /* 分类 */

        .index .tab li{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                width: 33.3%;
                color: #333;
        }
        /* 房源推荐 */
        .index .HosueRec{
                margin-top: .5rem;
        }
        .index .HosueRec>li{
                margin-top: 2px;
        }
        .index .HosueRec>li:nth-child(1){
                margin-bottom: 1px;
        }

        .index .HouseTit{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;  
                color: #333; 
                padding: .5rem; 
                font-size: 110%
        }
        .index .goto{
                width: 10px;
        }
        /* 向右滑动分类 */
        .index .House_tab{
                display: flex;
                overflow-x: auto;
        }
        .houseAdd {
                padding: .2rem 0;
        }
        .House_tab .housePrice,.houseState{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                font-size: 85%;
                color: #666;
        }
        .housePrice span:nth-child(1){
                width: 70%;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                
        }
        .housePrice span:nth-child(2){
                width: 30%;
                text-align: center;
        }

        .houseState span:nth-child(1){
                width: 70%;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                
        }
        .houseState span:nth-child(2){
                width: 30%;
                text-align: center;
        }
        .houseImg img{
                width: 100%;
                height: 100%;
        }


@media screen and (min-width: 320px) and (max-width: 360px) {
   /* 顶部user */
   .index .userimg{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width:1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        background: rgba(0,0,0,.2);
        position: relative;
        z-index: 1;
        margin-left: 85%;
        margin-top: 1rem;      
}


/* 搜索框 */
.index .search{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        background:white;
        position: relative;
        z-index: 1;
}
.searchDiv{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center; 
}
.searchDiv input{
        position: absolute;
        padding-left: .5rem;        
        padding-right: 1.6rem;
        font-size: 100%;
        right: 10%;
        height: 1.6rem;
        border-radius: 1rem;
}
/* 分类Img */
.index .tab{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        background: white;
        box-sizing: border-box;
        width: 95%;
        margin-left: 2.5%;
        padding-bottom: 25px;
        margin-top: 6%;
        border-radius: .3rem;
        -moz-box-shadow:0px 0px 8px #ddd; -webkit-box-shadow:0px 0px 8px #ddd; box-shadow:0px 0px 8px #ddd;
}
/* 推荐tit */
.tuijian{
        padding: .5rem !important;
}
.index .HosueRec>li{
        background: white;
        padding-bottom: 10px;
}
.index .tab li img{
        height: 30px;
        margin-top: 25px;
        margin-bottom: 15px;
}

.House_tab .houseImg{
        width: 200px;
        height: 134px;
}
.House_tab li{                
        width: 200px;                
        margin-left: .5rem;
}
}
@media screen and (min-width: 360px) and (max-width: 413px) { 
        /* 顶部user */
        .index .userimg{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: rgba(0,0,0,.2);
                position: relative;
                z-index: 1;
                margin-left: 85%;
                margin-top: 1rem;      
        }
        /* 搜索框 */
        .index .search{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 2rem;
                height:2rem;
                border-radius: 50%;
                background:white;
                position: relative;
                z-index: 1;
        }
        .searchDiv{
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center; 
        }
        .searchDiv input{
                position: absolute;
                padding-left: .5rem;
                font-size: 100%;
                right: 10%;
                height: 2rem;
                border-radius: 1rem;
                padding-right: 2rem;
        }





        /* 推荐tit */
        .tuijian{
                padding: .5rem !important;
        }
        /* 分类Img */
        .index .tab{
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                background: white;
                box-sizing: border-box;
                width: 95%;
                margin-left: 2.5%;
                padding-bottom: 25px;
                margin-top: 6%;
                border-radius: .3rem;
                -moz-box-shadow:0px 0px 8px #ddd; -webkit-box-shadow:0px 0px 8px #ddd; box-shadow:0px 0px 8px #ddd;
        }
        .index .HosueRec>li{
                background: white;
                padding-bottom: 10px;
        }
        .index .tab li img{
                height: 30px;
                margin-top: 25px;
                margin-bottom: 15px;
        }
        
        .House_tab .houseImg{
                width: 225px;
                height: 150px;
        }
        
        .House_tab li{                
                width: 225px;                
                margin-left: .5rem;
        }

}
@media screen and (min-width: 414px) {
          /* 顶部user */
          .index .userimg{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: rgba(0,0,0,.2);
                position: relative;
                z-index: 1;
                margin-left: 85%;
                margin-top: 1rem;      
        }
        /* 搜索框 */
        .index .search{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 2rem;
                height:2rem;
                border-radius: 50%;
                background:white;
                position: relative;
                z-index: 1;
        }
        .searchDiv{
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center; 
        }
        .searchDiv input{
                position: absolute;
                padding-left: .5rem;
                font-size: 100%;
                right: 10%;
                height: 2rem;
                border-radius: 1rem;
                padding-right: 2rem;
        }
        /* 分类Img */
        .index .tab{
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                background: white;
                box-sizing: border-box;
                width: 95%;
                margin-left: 2.5%;
                padding-bottom: 25px;
                margin-top: 6%;
                border-radius: .3rem;
                -moz-box-shadow:0px 0px 8px #ddd; -webkit-box-shadow:0px 0px 8px #ddd; box-shadow:0px 0px 8px #ddd;
        }
        /* 推荐tit */
        .tuijian{
                padding: .5rem !important;
        }
        .index .HosueRec>li{
                background: white;
                padding-bottom: 10px;
        }
        .index .tab li img{
                height: 30px;
                margin-top: 25px;
                margin-bottom: 15px;
        }

        .House_tab .houseImg{
                width: 270px;
                height: 180px;
        }
        .House_tab li{                
                width: 270px;                
                margin-left: .5rem;
        }
        
}

</style>
<div class="index">
        <div id="container"></div>
        <img ng-src="{{bannerImg}}" alt="BannerImg" class="BannerImg">
        <div class="userimg" ui-sref='center({id:"center"})'>
                <img src="../gy/images/icon/user.png" alt="center">
        </div>
        <div class="indexNav">
                <div class="local" ng-click="cityColl()">
                      <span ng-show="!showCity">  请选择 ▼    </span>    <span ng-show="showCity">{{showCity.name}}  ▼        </span>    
                </div>
                <ul class="addressBox" ng-show="local">
                        <li ng-repeat="city in city track by $index" ng-click="collAddress(city.id,$index)">
                                {{city.name}}
                        </li>    
                </ul>
                <div class="searchDiv" ui-sref='collList'>
                        <!-- <input type="text" ng-show="ColState" placeholder="请输入搜索内容"> -->
                        <div class="search" ng-click="showCol()">
                                <img src="../gy/images/icon/magnifier.png" alt="">
                        </div>
                </div>
        </div>
        <ul class="tab">
                <li ui-sref='longRend({id:1})'>
                        <img src="../gy/images/icon/Long rent.png" alt="长租">
                        <span>长租</span>
                </li>
                <li ui-sref='longRend({id:2})'>
                        <img src="../gy/images/icon/day rent.png" alt="民宿">
                        <span>民宿</span>
                </li>
                <li ui-sref='mapRend'>
                        <img src="../gy/images/icon/map.png" alt="地图找房">
                        <span>地图找房</span>
                </li>
                <li ui-sref='longRend({id:3})'>
                        <img src="../gy/images/icon/Business room rental.png" alt="营业房出租">
                        <span>营业房租贷</span>
                </li>
                <li ui-sref='longRend({id:4})'>
                        <img src="../gy/images/icon/house rent.png" alt="住房出租">
                        <span>住房出售</span>
                </li>
                <li ui-sref='recruitRend({id:"recruitRend"})'>
                        <img src="../gy/images/icon/landlord.png" alt="房东招募">
                        <span>房东招募</span>
                </li>
        </ul>
        <ul class="HosueRec">        
                <li class="c33 tuijian">房源推荐</li>
                <li ng-if='PensionData'>
                        <div class="HouseTit">
                                <span>民宿</span>
                                <img src="../gy/images/icon/forward.png" alt="下级" class="goto">
                        </div>
                        <ul class="House_tab"> 
                                <li ng-repeat="RecData in PensionData track by $index" ng-click="tiaozhuan(RecData.style,RecData.id,RecData.style)">
                                        <div class="houseList" >
                                                <div class="houseImg">
                                                        <img ng-src="{{httpSrc+RecData.img.img}}" alt="房间图片" >
                                                </div>
                                                <p class="houseAdd">{{RecData.title}}</p>
                                                <div class="housePrice">
                                                        <span > {{RecData.address}}</span> 
                                                        <span class="org">{{RecData.day_price |currency:"￥"}}</span>
                                                </div>
                                                <div class="houseState">
                                                        <span>  
                                                                <span ng-if="RecData.type==1">套一</span>                                                                
                                                                <span ng-if="RecData.type==2">套二</span>                                                                
                                                                <span ng-if="RecData.type==3">套三</span>                                                                
                                                                <span ng-if="RecData.type==4">套四</span>                                                                
                                                                <span ng-if="RecData.type==5">其他</span>
                                                                <span>{{RecData.size}}m²</span>
                                                        </span>
                                                        <span ng-if='RecData.status==1' class="green">今日可住</span>
                                                        <span ng-if='RecData.status==2'>已冻结</span>
                                                        <span ng-if='RecData.status==3'>待审核</span>
                                                        <span ng-if='RecData.status==4'>未通过</span>
                                                        <span ng-if='RecData.status==5'>已下单</span>
                                                        <span ng-if='RecData.status==6'>待打扫</span> 
                                                </div>
                                        </div>
                
                                </li>
                        </ul>
                </li>
                <li ng-if='longData'>
                        <div class="HouseTit">
                                <span>长租</span>
                                <img src="../gy/images/icon/forward.png" alt="下级" class="goto">
                        </div>
                        <ul class="House_tab"> 
                                <li ng-repeat="RecData in longData track by $index" ng-click="tiaozhuan(RecData.style,RecData.id,RecData.style)">
                                        <!-- <houselist data='RecData'></houselist> -->
                                        <div class="houseList" >
                                                <div class="houseImg">
                                                        <img ng-src="{{httpSrc+RecData.img.img}}" alt="房间图片" >
                                                </div>
                                                <p class="houseAdd">{{RecData.title}}</p>
                                                <div class="housePrice">
                                                        <span > {{RecData.address}}</span> 
                                                        <span class="org">{{RecData.price?"￥"+RecData.price:'面议'}}</span>
                                                </div>
                                                <div class="houseState">
                                                        <span>
                                                                <span ng-if="RecData.type==1">套一</span>                                                                
                                                                <span ng-if="RecData.type==2">套二</span>                                                                
                                                                <span ng-if="RecData.type==3">套三</span>                                                                
                                                                <span ng-if="RecData.type==4">套四</span>                                                                
                                                                <span ng-if="RecData.type==5">其他</span>
                                                                <span>{{RecData.size}}m²</span>
                                                        </span>
                                                </div>
                                        </div>
                
                                </li>
                        </ul>
                </li>
                <li ng-if='RentData'>
                        <div class="HouseTit">
                                <span>营业房租贷</span>
                                <img src="../gy/images/icon/forward.png" alt="下级" class="goto">
                        </div>
                        <ul class="House_tab"> 
                                <li ng-repeat="RecData in RentData track by $index"  ng-click="tiaozhuan(RecData.style,RecData.id,RecData.style)">
                                        <div class="houseList" >
                                                <div class="houseImg">
                                                        <img ng-src="{{httpSrc+RecData.img.img}}" alt="房间图片" >
                                                </div>
                                                <p class="houseAdd">{{RecData.title}}</p>
                                                <div class="housePrice">
                                                        <span > {{RecData.address}}</span> 
                                                        <span class="org">{{RecData.price?"￥"+RecData.price:'面议'}}</span>
                                                </div>
                                                <div class="houseState">
                                                        <span> 
                                                                <span ng-if="RecData.type==1">套一</span>                                                                
                                                                <span ng-if="RecData.type==2">套二</span>                                                                
                                                                <span ng-if="RecData.type==3">套三</span>                                                                
                                                                <span ng-if="RecData.type==4">套四</span>                                                                
                                                                <span ng-if="RecData.type==5">其他</span>
                                                                <span>{{RecData.size}}m²</span>
                                                        </span>
                                                        
                                                </div>
                                        </div>
                
                                </li>
                        </ul>
                </li>
                <li ng-if='businessData'>
                        <div class="HouseTit">
                                <span>住房出售</span>
                                <img src="../gy/images/icon/forward.png" alt="下级" class="goto">
                        </div>
                        <ul class="House_tab"> 
                                <li ng-repeat="RecData in businessData track by $index"  ng-click="tiaozhuan(RecData.style,RecData.id,RecData.style)">
                                        <div class="houseList" >
                                                <div class="houseImg">
                                                        <img ng-src="{{httpSrc+RecData.img.img}}" alt="房间图片" >
                                                </div>
                                                <p class="houseAdd">{{RecData.title}}</p>
                                                <div class="housePrice">
                                                        <span > {{RecData.address}}</span> 
                                                        <span class="org">{{RecData.price?"￥"+RecData.price:'面议'}}</span>
                                                </div>
                                                <div class="houseState">
                                                        <span> {{RecData.type}} <span>{{RecData.size}}m²</span></span>                                                        
                                                </div>
                                        </div>
                
                                </li>
                        </ul>
                </li>
        </ul>
        
</div> 
